<template>
  <div class="map3dd-demo">
    <map3dd
      ref="renderer"
      :models="models"
      :location="location"
      :cameraState="cameraState"
      :position="personInfo"
      :historyLocations="historyLocations"
      @selPerson="selPerson"
    ></map3dd>
    <button @click="drawLines">绘线</button>
  </div>
</template>

<script>
import GLTFLoader from "three-gltf-loader";
import map3dd from "@/components/Map3dd.vue";

export default {
  name: "map3ddDemo",
  components: {
    map3dd
  },
  data() {
    return {
      models: {
        scene: null,
        walkModel: null
      },
      location: [0, -0.71, 0],
      cameraState: {
        cameraPosition: {
          x: 12.712040691467593,
          y: 23.307118016734325,
          z: 0.8252094252973841
        },
        targetPosition: {
          x: 12.766547384872235,
          y: -3.165129054849823,
          z: -6.134829505487833
        }
      },
      personInfo: [],
      historyLocations: null
    };
  },
  mounted() {
    this.loadModels();
    this.loadPersonInfo();
  },
  methods: {
    loadModels() {
      console.log("loadModels start");
      new GLTFLoader().load("/models/anhui_machine_room.glb", model => {
        this.models.scene = model.scene;
      });
      new GLTFLoader().load("/models/manager.glb", model => {
        console.log("loadModels done");
        let object = model.scene.children[0];
        // object.rotateY(Math.PI)
        object.idleAnimation = model.animations[2];
        object.walkAnimation = model.animations[0];
        this.models.walkModel = {
          person: object
        };
      });
    },
    loadPersonInfo() {
      this.personInfo = [
        {
          code: "w0001",
          type: "person",
          alarm: false,
          hideAvatar: true,
          smoothedPosition: [4.12,0,-8.88],
          posId: 21,
        }
      ];
    },
    selPerson() {},
    drawLines() {
      console.log("drawLines");
      this.historyLocations = [1, 2, 3];
    }
  }
};
</script>

<style lang="less">
.map3dd-demo {
  height: 100%;
}
</style>